<template>
  <div class="modal fade"
       id="roleAuthorized"
       tabindex="-1"
       role="dialog"
       aria-labelledby="roleAuthorizedModel"
       aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content"
           style="margin-top: 50px;">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
          <h4 class="modal-title" id="myModalLabel">
            【<label style="color: tomato;">{{ roleName }}</label>】 角色授权
          </h4>
        </div>
        <div>
          <label class="tableTips">
            <img src="../../assets/images/book.svg" />
            确定按钮只针对当前选中的标签页,功能权限、数据权限需分两次操作
          </label>
        </div>
        <el-tabs v-model="activeName"
                 type="card">
          <el-tab-pane label="功能权限"
                       name="functionTab"
                       style="height: 300px; overflow: auto;">
            <el-tree :data="treeData"
                     ref="tree"
                     show-checkbox
                     node-key="resourcesCode"
                     default-expand-all
                     :check-strictly="true"
                     :default-checked-keys="checkedKeys"
                     :props="defaultProps"
                     @check="checkChange">
            </el-tree>
          </el-tab-pane>
          <el-tab-pane label="数据权限"
                       name="dataTab"
                       style="height: 300px; overflow: auto;">
            <label style="margin: 20px 30px 0px 50px; font-size: 14px;">数据查看范围：</label>
            <el-radio-group v-model="deptPermission">
              <el-radio label="3">本人</el-radio>
              <el-radio label="2">本部门</el-radio>
              <el-radio label="1">全部</el-radio>
            </el-radio-group>
          </el-tab-pane>
        </el-tabs>
        <div class="modal-footer">
          <button type="button"
                  class="btn checkedBtn"
                  v-show="btnShow"
                  @click="saveRoleTree()">确定</button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: ["roleId", "roleName"],
  data() {
    return {
      btnShow: true,
      activeName: "functionTab",
      treeData: [],
      defaultProps: {
        children: "children",
        label: "label"
      },
      checkedKeys: [],
      deptPermission: 1
    };
  },
  watch: {
    roleId: {
      handler: function (val, oldVal) {
        this.initTree(val);
      },
      deep: true
    }
  },
  mounted: function () {
    this.initTree();
  },
  methods: {
    initTree: function (roleId) {
      var _self = this;
      if (roleId) {
        var url = _self.utilHelper.apiUrl + "/api/getAuthorizeRoleList";
        var params = {
          roleId: roleId,
          resourcesOrigin: "2"
        };
        var body = {};
        body.params = params;
        _self.$http.post(url, body).then((response) => {
          var body = response.body.resData;
          _self.treeData = body.treeDataList;
          _self.checkedKeys = body.checkedKeys;
          _self.deptPermission = body.deptPermission;
        });
      }
    },
    checkChange(data) {
      const node = this.$refs.tree.getNode(data.resourcesCode);
      this.setNode(node);
    },
    setNode(node) {
      //递归设置子节点和父节点
      if (node.checked) {
        //如果当前是选中checkbox,则递归设置父节点和父父节点++选中
        this.setParentNodeChecked(node);
        //如果当前是选中checkbox,则递归设置子节点和子子节点++选中
        this.setChildNodeChecked(node);
      } else {
        //如果当前是取消选中checkbox,则递归设置子节点全部取消选中
        this.setChildNodeCancel(node);
      }
    },
    setParentNodeChecked(node) {
      //递归设置父节点全部选中
      if (node.parent) {
        for (const key in node) {
          if (key === "parent") {
            node[key].checked = true;
            this.setParentNodeChecked(node[key]);
          }
        }
      }
    },
    setChildNodeCancel(node) {
      //递归设置子节点全部取消选中
      if (node.childNodes && node.childNodes.length) {
        node.childNodes.forEach((item) => {
          item.checked = false;
          this.setChildNodeCancel(item);
        });
      }
    },
    setChildNodeChecked(node) {
      //递归设置子节点全部取消选中
      if (node.childNodes && node.childNodes.length) {
        node.childNodes.forEach((item) => {
          item.checked = true;
          this.setChildNodeChecked(item);
        });
      }
    },
    saveRoleTree: function () {
      var _self = this;
      _self.btnShow = false;
      let activeTab = _self.activeName;
      var body = {};
      if ("functionTab" === activeTab) {
        let aus = _self.$refs.tree.getCheckedKeys();
        var url = _self.utilHelper.apiUrl + "/api/dp/authorizeRole";
        var params = {
          roleId: _self.roleId,
          resourcesList: aus
        };
        body.params = params;
      } else if ("dataTab" === activeTab) {
        // 数据权限
        let setDPParams = {
          deptPermission: _self.deptPermission,
          nodeList: [],
          selected: []
        };
        var params = {
          belongsId: _self.roleId,
          bindDto: setDPParams
        };
        body.params = params;
        var url = _self.utilHelper.apiUrl + "/api/dp/setAgencyDeptPermission";
      }
      _self.$http.post(url, body).then((response) => {
        _self.btnShow = true;
        var body = response.body.resData || response.body;
        // 两个接口,返回值不一样.
        if (body.result == "1" || body.code == "1") {
          layer.msg("操作成功!", {
            time: 1000
          });
        } else {
          layer.msg("操作失败,请刷新后重试!", {
            time: 1000
          });
        }
      });
    }
  }
};
</script>
<style>
.tableTips {
  width: 100%;
  color: tomato;
  font-size: 14px;
  margin: 0;
}
.tableTips img {
  margin: 0px 10px 3px 10px;
  width: 20px;
  height: 40px;
}
</style>
